<template>
	<view scroll-y class="index-outer-wrapper">
		<div class="have-device" :style="{backgroundImage:'url('+PictureUrl+'bg-index.jpg)'}" v-if="CurrentLinkDevice">
			<custom-header-bar :bg="headerBg" title="首页"></custom-header-bar>
			<view class="charts-box">
				<image class="animate" :class="{'paused':BlueBodyInfo.test!=='ing','running':BlueBodyInfo.test==='ing'}"
					:src="PictureUrl+'yuanhuan.png'" mode="aspectFit"></image>
				<image class="bg-image" :src="PictureUrl+'yuanhuan-center.png'" mode="aspectFit"></image>
				<div class="center-text">
					<div class="title">
						<span class="num">{{BlueBodyInfo.xinlv||'--'}}</span>
						<span class="dw">次/每分</span>
					</div>
					<div v-if="UserInfo.utype===0">
						<div class="name" v-if="BlueBodyInfo.test==='ing'">
							<span class="text">等待一分钟</span>
						</div>
						<div class="name" v-else @click="testNow">
							<span class="text">一键测量</span>
						</div>
					</div>
				</div>
			</view>
			<div class="data-item">
				<div class="item">
					<div class="num">
						<div class="line xinlv"></div>
						<div class="text">{{BlueBodyInfo.step||'--'}}</div>
					</div>
					<div class="danwei">步</div>
					<div class="name">
						<image class="image" src="/static/menu-bushu.png"></image>
						<div class="text xinlv">步数</div>
					</div>
				</div>
				<div class="item">
					<div class="num">
						<div class="line reliang"></div>
						<div class="text">{{BlueBodyInfo.kcal||'--'}}</div>
					</div>
					<div class="danwei">千卡</div>
					<div class="name">
						<image class="image" src="/static/menu-reliang-circle.png"></image>
						<div class="text reliang">热量</div>
					</div>
				</div>
				<div class="item">
					<div class="num">
						<div class="line juli"></div>
						<div class="text">{{BlueBodyInfo.juli||'--'}}</div>
					</div>
					<div class="danwei">公里</div>
					<div class="name">
						<image class="image" src="/static/menu-juli-circle.png"></image>
						<div class="text juli">距离</div>
					</div>
				</div>
			</div>
		</div>
		<div class="no-device" v-else>
			<custom-header-bar title="首页" bg="1"></custom-header-bar>
		</div>
		<div :class="{'have-content':!!CurrentLinkDevice}">
			<div class="content-box">
				<div class="swiper-wrapper">
					<u-swiper :list="swiperList" height="220" imgMode="aspectFill" @click="jump">
					</u-swiper>
				</div>
				<div class="current-device" v-if="!!CurrentLinkDevice">
					<div class="text">
						<span>{{CurrentLinkDevice.nickName||CurrentLinkDevice.name||'--'}}</span>
						<span v-if="CurrentLinkDevice.state==='link'">在线</span>
						<span v-else-if="CurrentLinkDevice.state==='ing'">连接中...</span>
						<span v-else>离线</span>
					</div>
					<div class="line"></div>
				</div>
				<div class="tongji-data-item" @click="toAnalyse('xinlv')">
					<image class="menu" src="/static/menu-xinlv.png" mode="aspectFit"></image>
					<div class="name">心率</div>
					<div class="data">
						<div class="num">{{BlueBodyInfo.xinlv||'--'}} 次/分</div>
						<div class="time">{{new Date()|FormatDate('MM-DD')}}</div>
					</div>
					<image class="next" src="/static/icon-next-gray.png" mode="aspectFit"></image>
				</div>
				<div class="tongji-data-item" @click="toAnalyse('bushu')">
					<image class="menu" src="/static/menu-bushu.png" mode="aspectFit"></image>
					<div class="name">步数</div>
					<div class="data">
						<div class="num">{{BlueBodyInfo.step||'--'}}</div>
						<div class="time">{{new Date()|FormatDate('MM-DD')}}</div>
					</div>
					<image class="next" src="/static/icon-next-gray.png" mode="aspectFit"></image>
				</div>
				<div class="tongji-data-item" @click="toAnalyse('xueya')">
					<image class="menu" src="/static/menu-xueya.png" mode="aspectFit"></image>
					<div class="name">血压</div>
					<div class="data">
						<div class="num">{{BlueBodyInfo.gaoya||'--'}}/{{BlueBodyInfo.diya||'--'}}mmHg</div>
						<div class="time">{{new Date()|FormatDate('MM-DD')}}</div>
					</div>
					<image class="next" src="/static/icon-next-gray.png" mode="aspectFit"></image>
				</div>
				<div class="tongji-data-item" @click="toAnalyse('xueyang')">
					<image class="menu" src="/static/menu-xueyang.png" mode="aspectFit"></image>
					<div class="name">血氧</div>
					<div class="data">
						<div class="num">{{BlueBodyInfo.xueyang||'--'}}%</div>
						<div class="time">{{new Date()|FormatDate('MM-DD')}}</div>
					</div>
					<image class="next" src="/static/icon-next-gray.png" mode="aspectFit"></image>
				</div>
				<div class="tongji-data-item" @click="toAnalyse('shuimian')">
					<image class="menu" src="/static/menu-shuimian.png" mode="aspectFit"></image>
					<div class="name">睡眠</div>
					<div class="data">
						<div class="num">{{BlueBodyInfo.houe||'--'}}小时{{BlueBodyInfo.minute||'--'}}分</div>
						<div class="time">{{new Date()|FormatDate('MM-DD')}}</div>
					</div>
					<image class="next" src="/static/icon-next-gray.png" mode="aspectFit"></image>
				</div>
			</div>
		</div>
		<custom-tab-bar selected="1"></custom-tab-bar>
		<u-popup :show="adshow" mode="center" bgColor="transparent">
			<view class="ad-wrapper">
				<image class="ad" mode="aspectFit" :src="PictureUrl+'image-ad.png'"  @click="jump"></image>
				<image class="close" mode="aspectFit" @click="closeAD" src="/static/icon-close-circle.png"></image>
			</view>
		</u-popup>
		<popup-tip type="alert" image="warn" ref="pupuptip" title="新增设备提示" subTitle="完善信息后才可以添加设备" confirmText="去升级"
			@popupConfirm="popupConfirm">
		</popup-tip>
	</view>
</template>

<script>
	import CustomHeaderBar from '@/components/custom-header-bar.vue'
	import CustomTabBar from '@/components/custom-tab-bar.vue'
	import PopupTip from '@/components/popup-tip.vue'
	import {
		mapMutations,
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		ForceLogin
	} from "@/utils/filter.js"
	export default {
		data() {
			return {
				adshow: true,
				headerBg: '0',
				havedata: false,
				swiperList: [],
				chartData: {
					series: [{
						name: "正确率",
						color: "#ffffff",
						data: 0.8
					}]
				},
				opts: {
					color: ["#1890FF"],
					padding: undefined,
					title: {
						name: "",
						fontSize: 50,
						color: "#ffffff"
					},
					subtitle: {
						name: "",
						fontSize: 20,
						color: "#ffffff"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 8,
							backgroundColor: "#a0f7eeFF",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				}
			}
		},
		onLoad() {
			setTimeout(() => {
				uni.hideTabBar({
					complete(res) {
						console.log(res)
					}
				})
				this.swiperList = [
					this.PictureUrl + 'ad-1.png',
					this.PictureUrl + 'ad-2.png',
					this.PictureUrl + 'ad-3.png',
				]
			}, 300)
		},
		onShow() {
			uni.hideTabBar()
		},
		methods: {
			...mapActions(['WriteBlueTooth', 'ActionBlueBodyInfo']),
			// 一键测量
			testNow() {
				this.WriteBlueTooth('test')
				this.WriteBlueTooth('tongbu')
			},
			// 去完善信息
			popupConfirm() {
				uni.navigateTo({
					url: "/pages/moduleLogin/info/info"
				})
			},
			/**
			 * 关闭弹窗广告
			 * */
			closeAD() {
				this.adshow = false
			},
			/**
			 * 跳转到数据分析页面
			 * */
			toAnalyse(type) {
				if (type === 'bushu') {
					uni.navigateTo({
						url: "/pages/analyse/step"
					})
				} else {
					uni.navigateTo({
						url: "/pages/analyse/analyse?type=" + type
					})
				}
			},
      //轮播跳转家政页
      jump(){
        if (ForceLogin() === false) {
          return
        }
        uni.switchTab({
          url: "/pages/housekeeping/housekeeping"
        })
      },
			/**
			 * 添加设备
			 * */
			addBlueTooth() {

				if (ForceLogin() === false) {
					return
				}
				if (this.UserInfo.utype === 0) {
					uni.navigateTo({
						url: "/pages/bluetooth/bluetooth"
					})
				} else {
					this.$refs.pupuptip.tipshow = true
				}
			},
		},
		computed: {
			...mapGetters([
				'UserInfo', 'PictureUrl', 'BlueDevice', 'BlueBodyInfo', 'CurrentLinkDevice'
			])
		},
		components: {
			CustomHeaderBar,
			CustomTabBar,
			PopupTip
		}
	}
</script>

<style lang="scss">
	@import '@/utils/variable.scss';

	.index-outer-wrapper {
		padding: 0upx 0upx 120upx 0upx;
		box-sizing: border-box;
		background-color: #F4F4F4FF;

		.ad-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;

			.ad {
				width: 600upx;
				height: 710upx;
			}

			.close {
				margin-top: 40upx;
				width: 80upx;
				height: 80upx;
			}
		}

		.have-device {
			padding-top: 160upx;
			background-size: cover;
		}

		.no-device {
			padding-top: 160upx;
		}

		.have-content {
			margin-top: -30upx;
			padding-top: 120upx;
			border-top-left-radius: 30upx;
			border-top-right-radius: 30upx;
			background-color: #F4F4F4FF;
		}

		.content-box {
			padding: 24upx;

			&.no-bottom {
				padding-bottom: 0;
			}
		}

		.charts-box {
			width: 100%;
			height: 460upx;
			position: relative;
			text-align: center;

			.bg-image {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: 0 auto;
				width: 460upx;
				height: 460upx;
				transform: translate(-50%, -50%);
			}

			.animate {
				margin: 0 auto;
				width: 460upx;
				height: 460upx;
				transform: translate(-50%, -50%);
				animation: rotate 3s infinite linear;

				&.paused {
					animation-play-state: paused;
				}

				&.running {
					animation-play-state: running;
				}
			}

			.center-text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;

				.title {

					font-weight: 800;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: baseline;

					.num {
						font-size: 100upx;
					}

					.dw {
						font-size: 32upx;
					}
				}

				.name {
					display: inline-block;
					width: 220upx;
					height: 60upx;
					line-height: 60upx;
					background: #FFFFFF48;
					border-radius: 20upx;
					font-size: 36upx;
					color: #FFFFFF;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;

					.image {
						height: 44upx;
					}
				}
			}
		}

		.data-item {
			display: flex;
			justify-content: space-around;
			position: relative;
			top: 80upx;
			;

			.item {
				flex: 0 0 200upx;
				padding: 24upx;
				background-color: #ffffff;
				box-sizing: border-box;
				border-radius: 30upx;

				.num {
					display: flex;
					align-items: center;
					height: 70upx;
					line-height: 70upx;

					.line {
						margin-right: 18upx;
						width: 8upx;
						height: 70upx;
						border-radius: 4upx;
					}

					.xinlv {
						background: linear-gradient(195deg, #FB624D, #FDA89D, #FFFFFF);
					}

					.reliang {
						background: linear-gradient(195deg, #FFFFFF, #35D290);
					}

					.juli {
						background: linear-gradient(195deg, #FDB155, #FFFFFF);
					}

					.text {
						font-size: 70upx;
						font-weight: bold;
						height: 70upx;
						line-height: 70upx;
					}
				}

				.danwei {
					margin: 24upx 0;
					color: #000000aa;
					font-size: 30upx;
					text-align: center;
				}

				.name {
					display: flex;
					align-items: center;

					.image {
						margin-right: 12upx;
						width: 60upx;
						height: 60upx;
					}

					.text {
						font-size: 40upx;
						font-weight: bold;
					}

					.xinlv {
						color: #F24B35FF;
					}

					.reliang {
						color: #35D290FF;
					}

					.juli {
						color: #FDB155FF;
					}
				}
			}
		}


		.add-device {
			height: 100upx;
			background-color: #ffffff;
			border-radius: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.image {
				width: 32upx;
				margin-right: 12upx;
			}

			.text {
				color: #FF8810FF;
				font-size: 36upx;
				font-weight: 400;
			}
		}

		.swiper-wrapper {
			border-radius: 30upx;
			overflow: hidden;
		}

		.current-device {
			margin: 24upx 0;

			.text {
				font-size: 44upx;
			}

			.line {
				height: 12upx;
				width: 140upx;
				background: linear-gradient(90deg, #66D5CE 0%, rgba(196, 196, 196, 0) 100%);
			}
		}

		.tongji-data-item {
			margin: 24upx 0;
			padding: 0 40upx;
			display: flex;
			height: 180upx;
			align-items: center;
			background-color: #ffffff;
			border-radius: 30upx;

			.menu {
				margin-right: 24upx;
				width: 72upx;
			}

			.name {
				color: #000000D9;

			}

			.data {
				flex: 1;
				text-align: center;

				.num {
					color: #000000CC;
					font-size: 32upx;
				}

				.time {
					color: #0000004D;
					font-size: 24upx;
				}
			}

			.next {
				width: 24upx;
				height: 24upx;
			}
		}

	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
